<template>
    <div class="gxflBox">
        <div class="gxflFlex gxflTitle">
            <div class="gxflTitleImg">
                <img style="width: 100%;height: 100%;" src="/src/assets/icon/分类.png" alt="">
            </div>
            <div class="gxflTitleText">{{ title }}</div>
        </div>
        <div class="gxfllistBox">
            <div class="gxflFlex gxflFor" v-for="(item,index) in sysProductTypeData" :key="index" @click="$emit('list-click',item)" >
                <div class="gxfllistImg">
                    <img style="width: 100%;height: 100%;" :src="`${JSON.parse(item.remark).url}${item.dictLabel}.png`" alt="">
                </div>
                <div class="gxfllistText">{{ item.dictLabel }}</div>
            </div>
        </div>
    </div>
</template>
<script setup>
import  { ref, onMounted } from "vue";
import { sysProductType } from '@/api/dictionary.js';
defineProps({
  title: {
    type: String,
    default: '分类'
  },
  sysProductTypeData: {
    type: Array,
    default: () => []
  }
});
// onMounted(() => {
//     sysProductTypefun()
// });
// const sysProductTypeData = ref([]);
// const sysProductTypefun = async () => {
//     const res = await sysProductType();
//     sysProductTypeData.value = res.data
// }
</script>
<style scoped lang="scss">
.gxflBox {
    width: 100%;
    height: 100%;
    border-radius: 8px;
    background: #fff;
    // padding: 20px;
    padding-bottom: 10px;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1),
        0 8px 16px rgba(0, 0, 0, 0.1); // 添加双层阴影增强立体感
}

.gxflFlex {
    display: flex;
    align-items: center;
}

.gxflTitle {
    margin-bottom: 10px;
    padding-left: 20px;
    padding-top: 10px;

    .gxflTitleImg {
        width: 20px;
        height: 20px;
    }

    .gxflTitleText {
        margin-left: 10px;
        font-weight: bold;
        font-size: 18px;
        color: #1F1F1F;
    }
}

.gxfllistBox {
    .gxflFor {
        padding: 10px 0;
        padding-left: 20px;
        cursor: pointer;

        &:hover {
            background-color: #f0f0f0; // 鼠标悬停时的背景颜色

            .gxfllistText {
                color: $green-color;
            }
        }

        .gxfllistImg {
            width: 18px;
            height: 18px;
        }

        .gxfllistText {
            margin-left: 8px;
            font-weight: 300;
            font-size: 12px;
            color: #1F1F1F;
        }
    }
}
</style>